<!--
	课程资源模块
-->
<template>
<div class="chapter-box">
<div class="chapter-content">
<el-container>
<!-- 左边目录树 start -->
<el-aside width="200px">
<div class="chapter-tree">
	<span @click.stop="addCatalogueItem(1,{id:0})">
		<el-icon :size="20"><folder-add /></el-icon>
	</span>
	<el-tree
	:data="catalogueData"
	@node-click="treeClick"
	:props="{label:'catalogueText'}">
		<template #default="{ node, data }">
			<span class="add-delete-icon-box">
				<span>{{ node.label }}</span>
				<span class="add-delete-icon" @click.stop="updateCatalogueItem(node,data)">
					<el-icon :size="20"><edit /></el-icon>
				</span>
				<span class="add-delete-icon" @click.stop="addCatalogueItem(node,data)">
					<el-icon :size="20"><folder-add /></el-icon>
				</span>
				<span class="add-delete-icon" @click.stop="deleteCatalogueItem(node,data)">
					<el-icon :size="20"><folder-remove /></el-icon>
				</span>
			</span>
		</template>
	</el-tree>
</div>
</el-aside>
<!-- 左边目录树 end -->
<!-- 右边主体内容 start -->
<el-main>
<div class="chapter-main">
<!-- 顶部按钮 start -->
<div class="main-top">
	<el-upload
		:action="'http://localhost:8080/file/upload/'+thisCatalogueId"
		multiple
		@success="uploadSuccess"
		name="file">
		<el-button type="primary">点击上传</el-button>
	</el-upload>
</div>
<!-- 顶部按钮 end -->
<el-divider></el-divider>
<!-- 下面展示的内容 start -->
<div class="main-bottom">
	<el-empty description="没有资源" v-if="resourceList.length<1"></el-empty>
	<el-card shadow="hover" v-for="item in resourceList" >
		<div class="card-box">
			<div class="resource-name">
				{{item.resourceName}}
			</div>
			<div class="resource-button">
				<el-button type="primary" @click="downloadFile(item.resourceUrl)">下载</el-button>
				<el-button type="danger" @click="deleteResource(item.id)">删除</el-button>
			</div>
		</div>
	</el-card>
</div>
<!-- 下面展示的内容 start -->
</div>
</el-main>
<!-- 右边主体内容 end -->
</el-container>
</div>
</div>
</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import { ElMessageBox, ElMessage } from 'element-plus';

export default {
	name: "Resource",
	data(){
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			/**
			 * 目录数据
			 */
			catalogueData:[],
			/*
			* 给初始值
			* */
			thisCatalogueId:-1,
			/*
			* 资源列表
			* */
			resourceList:[],
		}
	},
	methods:{
		/**
		 * 增加资源目录方法
		 * @param node
		 * @param data
		 */
		addCatalogueItem(node,data){
			ElMessageBox.prompt('请输入目录名称', '创建目录', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then((value)=>{
				axios.post(ipconfig.address+"/catalogue/addOrUpdateCatalogue",{
					parentId:data.id,
					catalogueText:value.value,
					courseId:this.teacherInfoData.thisEditCourse.id,
					state:2,
				}).then((response)=>{
					if(response.data.code==200){
						ElMessage.success(response.data.message);
						location.reload();
					}else{
					    ElMessage.warning(response.data.message);
					}
				}).catch((error)=>{
				    console.log(error);
				});
			}).catch(()=>{
			});
		},
		/**
		 * 删除资源目录方法
		 * @param node
		 * @param data
		 */
		deleteCatalogueItem(node,data){
			ElMessageBox.confirm(
				'确定要删除?'+data.id,
				'删除',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.get(ipconfig.address+"/file/deleteCatalogue/"+data.id).then((response)=>{
					if(response.data.code==200){
						location.reload();
						ElMessage.success(response.data.message);
					}else{
					    ElMessage.warning(response.data.message);
					}
				}).catch((error)=>{
				    console.log(error);
				});
			});
		},
		/**
		 * 修改资源目录方法
		 * @param node
		 * @param data
		 */
		updateCatalogueItem(node,data){
			console.log(data)
			ElMessageBox.prompt('请输入目录名称', '修改目录', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then((value)=>{
				axios.post(ipconfig.address+"/catalogue/addOrUpdateCatalogue",{
					id:data.id,
					catalogueText:value.value,
				}).then((response)=>{
					if(response.data.code==200){
						ElMessage.success(response.data.message);
						location.reload();
					}else{
						ElMessage.warning(response.data.message);
					}
				}).catch((error)=>{
					console.log(error);
				});
			}).catch(()=>{
			});
		},
		/**
		 * 树被点击事件，加载右边的数据
		 * @param data
		 * @param childrenNode
		 * @param node
		 */
		treeClick(data,childrenNode,node){
			// 把当前节点资源点id存起来
			this.thisCatalogueId=data.id;
			// 获取数据 这个目录下的资源
			axios.get(ipconfig.address+"/file/resourceList/"+data.id).then((response)=>{
				if(response.data.code==200){
					this.resourceList=response.data.data;
				}else{
				    ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
			    console.log(error);
			});
		},
		/**
		 * 上传成功的回调
		 * @param response
		 * @param file
		 * @param fileList
		 */
		uploadSuccess(response, file, fileList){
			if(response.code==200){
				ElMessage.success(response.message);
			}else{
			    ElMessage.warning(response.data.message);
			}
		},
		/**
		 * 下载文件事件
		 * @param path
		 */
		downloadFile(path){
			window.open(ipconfig.address+"/file/download?path="+path);
		},
		deleteResource(resourceId){
			ElMessageBox.confirm(
				'确定要删除?'+resourceId,
				'删除',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.delete(ipconfig.address+"/resource/deleteResource/"+resourceId).then((response)=>{
					if(response.data.code==200){
						location.reload();
						ElMessage.success(response.data.message);
					}else{
						ElMessage.warning(response.data.message);
					}
				}).catch((error)=>{
					console.log(error);
				});
			});
		}

	},
	mounted() {
		// 在这获取资源目录数据
		axios.get(ipconfig.address+"/catalogue/catalogueList/"
			+this.teacherInfoData.thisEditCourse.id+"?state=2").then((response)=>{
			if(response.data.code==200){
				this.catalogueData=response.data.data;
				ElMessage.success(response.data.message);
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
	}

}
</script>

<style lang="scss" scoped>
 .add-delete-icon{
	display: none;
}
 .add-delete-icon-box:hover .add-delete-icon{
	 display: inline;

 }
.chapter-box{
	width: 100%;
	background: #ffffff;

	.chapter-content{
		padding: 20px;
		.top-box{
			margin-top: 20px;margin-bottom: 20px;
			display: flex;

			div{
				margin-left: 10px;
			}
		}

		.chapter-tree{
			border-right: 1px solid #E1E1E1;
		}

		.chapter-main{
			width: 100%;

			.main-top{

			}

			.main-bottom{
				.card-box{
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

}
</style>